<!DOCTYPE html>
<html lang="zh-CN" data-theme="corporate">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>监控中心 - DevOps平台</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/daisyui/4.12.10/full.min.css" rel="stylesheet">
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.4.21/vue.global.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/Chart.js/4.4.0/chart.min.js"></script>
    <style>
        .metric-card {
            transition: all 0.3s ease;
        }
        .metric-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
        }
        .status-indicator {
            animation: pulse 2s infinite;
        }
        .alert-critical {
            animation: blink 1s infinite;
        }
        @keyframes blink {
            0%, 50% { opacity: 1; }
            51%, 100% { opacity: 0.5; }
        }
        .log-entry {
            font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
            font-size: 12px;
        }
        .log-error {
            background-color: rgba(239, 68, 68, 0.1);
            border-left: 3px solid rgb(239, 68, 68);
        }
        .log-warning {
            background-color: rgba(251, 191, 36, 0.1);
            border-left: 3px solid rgb(251, 191, 36);
        }
        .log-info {
            background-color: rgba(59, 130, 246, 0.1);
            border-left: 3px solid rgb(59, 130, 246);
        }
        .log-debug {
            background-color: rgba(107, 114, 128, 0.1);
            border-left: 3px solid rgb(107, 114, 128);
        }
        .topology-node {
            transition: all 0.3s ease;
        }
        .topology-node:hover {
            transform: scale(1.1);
        }
        .connection-line {
            stroke: #e5e7eb;
            stroke-width: 2;
            stroke-dasharray: 5,5;
            animation: dash 20s linear infinite;
        }
        @keyframes dash {
            to {
                stroke-dashoffset: -1000;
            }
        }
        .real-time-chart {
            height: 300px;
        }
    </style>
</head>
<body class="bg-base-100">
    <div id="monitoring">
        <!-- 导航栏 -->
        <div class="navbar bg-base-100 shadow-lg">
            <div class="navbar-start">
                <a href="index.html" class="btn btn-ghost text-xl">
                    <i class="fas fa-arrow-left mr-2"></i>
                    返回主页
                </a>
            </div>
            <div class="navbar-center">
                <h1 class="text-2xl font-bold">监控中心</h1>
            </div>
            <div class="navbar-end">
                <div class="flex items-center space-x-4">
                    <div class="flex items-center space-x-2">
                        <div class="status-indicator w-3 h-3 bg-green-500 rounded-full"></div>
                        <span class="text-sm">系统正常</span>
                    </div>
                    <div class="dropdown dropdown-end">
                        <div tabindex="0" role="button" class="btn btn-ghost">
                            <i class="fas fa-bell text-xl"></i>
                            <div v-if="unreadAlerts > 0" class="badge badge-error badge-xs">{{ unreadAlerts }}</div>
                        </div>
                        <ul tabindex="0" class="dropdown-content z-[1] menu p-2 shadow bg-base-100 rounded-box w-80">
                            <li class="menu-title">
                                <span>最新告警</span>
                            </li>
                            <li v-for="alert in recentAlerts.slice(0, 5)" :key="alert.id">
                                <a class="text-sm">
                                    <i :class="getAlertIcon(alert.level)" class="mr-2"></i>
                                    <div>
                                        <div class="font-semibold">{{ alert.title }}</div>
                                        <div class="text-xs text-base-content/70">{{ alert.time }}</div>
                                    </div>
                                </a>
                            </li>
                            <li><a class="text-center text-primary">查看全部告警</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

        <!-- 主要内容 -->
        <div class="container mx-auto px-4 py-8">
            <!-- 系统概览 -->
            <div class="grid grid-cols-1 lg:grid-cols-4 gap-6 mb-8">
                <div class="metric-card card bg-gradient-to-r from-blue-500 to-blue-600 text-white shadow-xl">
                    <div class="card-body">
                        <div class="flex items-center justify-between">
                            <div>
                                <h2 class="card-title text-lg">CPU使用率</h2>
                                <p class="text-3xl font-bold">{{ systemMetrics.cpu }}%</p>
                                <p class="text-sm opacity-90">{{ getCpuStatus() }}</p>
                            </div>
                            <div class="radial-progress text-white" :style="`--value:${systemMetrics.cpu}; --size:4rem; --thickness: 4px;`">
                                <i class="fas fa-microchip text-2xl"></i>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="metric-card card bg-gradient-to-r from-green-500 to-green-600 text-white shadow-xl">
                    <div class="card-body">
                        <div class="flex items-center justify-between">
                            <div>
                                <h2 class="card-title text-lg">内存使用率</h2>
                                <p class="text-3xl font-bold">{{ systemMetrics.memory }}%</p>
                                <p class="text-sm opacity-90">{{ getMemoryStatus() }}</p>
                            </div>
                            <div class="radial-progress text-white" :style="`--value:${systemMetrics.memory}; --size:4rem; --thickness: 4px;`">
                                <i class="fas fa-memory text-2xl"></i>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="metric-card card bg-gradient-to-r from-purple-500 to-purple-600 text-white shadow-xl">
                    <div class="card-body">
                        <div class="flex items-center justify-between">
                            <div>
                                <h2 class="card-title text-lg">磁盘使用率</h2>
                                <p class="text-3xl font-bold">{{ systemMetrics.disk }}%</p>
                                <p class="text-sm opacity-90">{{ getDiskStatus() }}</p>
                            </div>
                            <div class="radial-progress text-white" :style="`--value:${systemMetrics.disk}; --size:4rem; --thickness: 4px;`">
                                <i class="fas fa-hdd text-2xl"></i>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="metric-card card bg-gradient-to-r from-orange-500 to-orange-600 text-white shadow-xl">
                    <div class="card-body">
                        <div class="flex items-center justify-between">
                            <div>
                                <h2 class="card-title text-lg">网络流量</h2>
                                <p class="text-3xl font-bold">{{ systemMetrics.network }}</p>
                                <p class="text-sm opacity-90">MB/s</p>
                            </div>
                            <div class="text-4xl opacity-80">
                                <i class="fas fa-network-wired"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 服务状态和实时图表 -->
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
                <!-- 服务状态 -->
                <div class="card bg-base-100 shadow-xl">
                    <div class="card-body">
                        <h2 class="card-title mb-4">
                            <i class="fas fa-server text-primary mr-2"></i>
                            服务状态
                        </h2>
                        <div class="space-y-3">
                            <div v-for="service in services" :key="service.id" 
                                 class="flex items-center justify-between p-3 rounded-lg bg-base-200">
                                <div class="flex items-center space-x-3">
                                    <div class="w-3 h-3 rounded-full" :class="getServiceStatusColor(service.status)"></div>
                                    <div>
                                        <div class="font-semibold">{{ service.name }}</div>
                                        <div class="text-sm text-base-content/70">{{ service.description }}</div>
                                    </div>
                                </div>
                                <div class="text-right">
                                    <div class="badge" :class="getServiceStatusBadge(service.status)">
                                        {{ service.status }}
                                    </div>
                                    <div class="text-xs text-base-content/70 mt-1">
                                        响应时间: {{ service.responseTime }}ms
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 实时性能图表 -->
                <div class="card bg-base-100 shadow-xl">
                    <div class="card-body">
                        <h2 class="card-title mb-4">
                            <i class="fas fa-chart-line text-success mr-2"></i>
                            实时性能监控
                        </h2>
                        <div class="real-time-chart">
                            <canvas id="realTimeChart"></canvas>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 告警和日志 -->
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
                <!-- 告警列表 -->
                <div class="card bg-base-100 shadow-xl">
                    <div class="card-body">
                        <div class="flex justify-between items-center mb-4">
                            <h2 class="card-title">
                                <i class="fas fa-exclamation-triangle text-warning mr-2"></i>
                                告警信息
                            </h2>
                            <div class="flex space-x-2">
                                <select class="select select-bordered select-sm" v-model="alertFilter">
                                    <option value="">全部级别</option>
                                    <option value="critical">严重</option>
                                    <option value="warning">警告</option>
                                    <option value="info">信息</option>
                                </select>
                                <button class="btn btn-sm btn-outline" @click="refreshAlerts">
                                    <i class="fas fa-sync-alt"></i>
                                </button>
                            </div>
                        </div>
                        <div class="space-y-2 max-h-80 overflow-y-auto">
                            <div v-for="alert in filteredAlerts" :key="alert.id" 
                                 class="p-3 rounded-lg border" :class="getAlertClass(alert.level)">
                                <div class="flex items-start justify-between">
                                    <div class="flex items-start space-x-3">
                                        <i :class="getAlertIcon(alert.level)" class="mt-1"></i>
                                        <div>
                                            <div class="font-semibold">{{ alert.title }}</div>
                                            <div class="text-sm text-base-content/70 mt-1">{{ alert.description }}</div>
                                            <div class="text-xs text-base-content/50 mt-2">{{ alert.time }}</div>
                                        </div>
                                    </div>
                                    <div class="flex space-x-1">
                                        <button class="btn btn-xs btn-outline" @click="acknowledgeAlert(alert)">
                                            确认
                                        </button>
                                        <button class="btn btn-xs btn-outline" @click="resolveAlert(alert)">
                                            解决
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 实时日志 -->
                <div class="card bg-base-100 shadow-xl">
                    <div class="card-body">
                        <div class="flex justify-between items-center mb-4">
                            <h2 class="card-title">
                                <i class="fas fa-file-alt text-info mr-2"></i>
                                实时日志
                            </h2>
                            <div class="flex space-x-2">
                                <select class="select select-bordered select-sm" v-model="logFilter">
                                    <option value="">全部级别</option>
                                    <option value="ERROR">错误</option>
                                    <option value="WARN">警告</option>
                                    <option value="INFO">信息</option>
                                    <option value="DEBUG">调试</option>
                                </select>
                                <button class="btn btn-sm btn-outline" @click="clearLogs">
                                    <i class="fas fa-trash"></i>
                                </button>
                            </div>
                        </div>
                        <div class="bg-black text-green-400 p-4 rounded-lg max-h-80 overflow-y-auto font-mono text-xs">
                            <div v-for="log in filteredLogs" :key="log.id" 
                                 class="log-entry mb-1 p-1 rounded" :class="getLogClass(log.level)">
                                <span class="text-gray-400">[{{ log.timestamp }}]</span>
                                <span :class="getLogLevelColor(log.level)">[{{ log.level }}]</span>
                                <span class="text-blue-300">[{{ log.service }}]</span>
                                <span class="text-white">{{ log.message }}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 系统拓扑图 -->
            <div class="card bg-base-100 shadow-xl mb-8">
                <div class="card-body">
                    <h2 class="card-title mb-4">
                        <i class="fas fa-project-diagram text-purple-500 mr-2"></i>
                        系统拓扑图
                    </h2>
                    <div class="relative bg-base-200 rounded-lg p-8 min-h-96">
                        <!-- 拓扑节点 -->
                        <div class="absolute top-8 left-1/2 transform -translate-x-1/2">
                            <div class="topology-node bg-blue-500 text-white p-4 rounded-lg shadow-lg text-center cursor-pointer"
                                 @click="showNodeDetails('loadbalancer')">
                                <i class="fas fa-balance-scale text-2xl mb-2"></i>
                                <div class="font-semibold">负载均衡器</div>
                                <div class="text-xs">Nginx</div>
                                <div class="w-3 h-3 bg-green-400 rounded-full mx-auto mt-2"></div>
                            </div>
                        </div>

                        <!-- Web服务器集群 -->
                        <div class="absolute top-32 left-1/4 transform -translate-x-1/2">
                            <div class="topology-node bg-green-500 text-white p-3 rounded-lg shadow-lg text-center cursor-pointer"
                                 @click="showNodeDetails('web1')">
                                <i class="fas fa-server text-xl mb-2"></i>
                                <div class="font-semibold text-sm">Web-01</div>
                                <div class="text-xs">Node.js</div>
                                <div class="w-3 h-3 bg-green-400 rounded-full mx-auto mt-1"></div>
                            </div>
                        </div>

                        <div class="absolute top-32 right-1/4 transform translate-x-1/2">
                            <div class="topology-node bg-green-500 text-white p-3 rounded-lg shadow-lg text-center cursor-pointer"
                                 @click="showNodeDetails('web2')">
                                <i class="fas fa-server text-xl mb-2"></i>
                                <div class="font-semibold text-sm">Web-02</div>
                                <div class="text-xs">Node.js</div>
                                <div class="w-3 h-3 bg-green-400 rounded-full mx-auto mt-1"></div>
                            </div>
                        </div>

                        <!-- 数据库集群 -->
                        <div class="absolute bottom-8 left-1/3 transform -translate-x-1/2">
                            <div class="topology-node bg-purple-500 text-white p-3 rounded-lg shadow-lg text-center cursor-pointer"
                                 @click="showNodeDetails('db-master')">
                                <i class="fas fa-database text-xl mb-2"></i>
                                <div class="font-semibold text-sm">DB-Master</div>
                                <div class="text-xs">MySQL</div>
                                <div class="w-3 h-3 bg-green-400 rounded-full mx-auto mt-1"></div>
                            </div>
                        </div>

                        <div class="absolute bottom-8 right-1/3 transform translate-x-1/2">
                            <div class="topology-node bg-purple-400 text-white p-3 rounded-lg shadow-lg text-center cursor-pointer"
                                 @click="showNodeDetails('db-slave')">
                                <i class="fas fa-database text-xl mb-2"></i>
                                <div class="font-semibold text-sm">DB-Slave</div>
                                <div class="text-xs">MySQL</div>
                                <div class="w-3 h-3 bg-green-400 rounded-full mx-auto mt-1"></div>
                            </div>
                        </div>

                        <!-- 缓存服务器 -->
                        <div class="absolute top-32 left-1/2 transform -translate-x-1/2">
                            <div class="topology-node bg-red-500 text-white p-3 rounded-lg shadow-lg text-center cursor-pointer"
                                 @click="showNodeDetails('redis')">
                                <i class="fas fa-memory text-xl mb-2"></i>
                                <div class="font-semibold text-sm">Redis</div>
                                <div class="text-xs">缓存</div>
                                <div class="w-3 h-3 bg-green-400 rounded-full mx-auto mt-1"></div>
                            </div>
                        </div>

                        <!-- 连接线 (使用SVG) -->
                        <svg class="absolute inset-0 w-full h-full pointer-events-none">
                            <line class="connection-line" x1="50%" y1="15%" x2="25%" y2="35%"></line>
                            <line class="connection-line" x1="50%" y1="15%" x2="75%" y2="35%"></line>
                            <line class="connection-line" x1="25%" y1="45%" x2="33%" y2="75%"></line>
                            <line class="connection-line" x1="75%" y1="45%" x2="67%" y2="75%"></line>
                            <line class="connection-line" x1="50%" y1="35%" x2="33%" y2="75%"></line>
                            <line class="connection-line" x1="50%" y1="35%" x2="67%" y2="75%"></line>
                        </svg>
                    </div>
                </div>
            </div>

            <!-- 性能指标详情 -->
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
                <!-- 应用性能 -->
                <div class="card bg-base-100 shadow-xl">
                    <div class="card-body">
                        <h2 class="card-title mb-4">
                            <i class="fas fa-tachometer-alt text-blue-500 mr-2"></i>
                            应用性能
                        </h2>
                        <div class="space-y-4">
                            <div class="flex justify-between items-center">
                                <span>平均响应时间</span>
                                <span class="font-bold">{{ appMetrics.avgResponseTime }}ms</span>
                            </div>
                            <div class="flex justify-between items-center">
                                <span>QPS</span>
                                <span class="font-bold">{{ appMetrics.qps }}</span>
                            </div>
                            <div class="flex justify-between items-center">
                                <span>错误率</span>
                                <span class="font-bold text-error">{{ appMetrics.errorRate }}%</span>
                            </div>
                            <div class="flex justify-between items-center">
                                <span>在线用户</span>
                                <span class="font-bold text-success">{{ appMetrics.onlineUsers }}</span>
                            </div>
                        </div>
                        <div class="mt-4">
                            <canvas id="appPerformanceChart" height="200"></canvas>
                        </div>
                    </div>
                </div>

                <!-- 数据库性能 -->
                <div class="card bg-base-100 shadow-xl">
                    <div class="card-body">
                        <h2 class="card-title mb-4">
                            <i class="fas fa-database text-purple-500 mr-2"></i>
                            数据库性能
                        </h2>
                        <div class="space-y-4">
                            <div class="flex justify-between items-center">
                                <span>连接数</span>
                                <span class="font-bold">{{ dbMetrics.connections }}</span>
                            </div>
                            <div class="flex justify-between items-center">
                                <span>查询/秒</span>
                                <span class="font-bold">{{ dbMetrics.queriesPerSecond }}</span>
                            </div>
                            <div class="flex justify-between items-center">
                                <span>慢查询</span>
                                <span class="font-bold text-warning">{{ dbMetrics.slowQueries }}</span>
                            </div>
                            <div class="flex justify-between items-center">
                                <span>缓存命中率</span>
                                <span class="font-bold text-success">{{ dbMetrics.cacheHitRate }}%</span>
                            </div>
                        </div>
                        <div class="mt-4">
                            <canvas id="dbPerformanceChart" height="200"></canvas>
                        </div>
                    </div>
                </div>

                <!-- 系统资源 -->
                <div class="card bg-base-100 shadow-xl">
                    <div class="card-body">
                        <h2 class="card-title mb-4">
                            <i class="fas fa-server text-green-500 mr-2"></i>
                            系统资源
                        </h2>
                        <div class="space-y-4">
                            <div>
                                <div class="flex justify-between mb-1">
                                    <span>CPU负载</span>
                                    <span>{{ systemMetrics.cpuLoad }}</span>
                                </div>
                                <progress class="progress progress-primary" :value="systemMetrics.cpu" max="100"></progress>
                            </div>
                            <div>
                                <div class="flex justify-between mb-1">
                                    <span>内存使用</span>
                                    <span>{{ systemMetrics.memoryUsed }}/{{ systemMetrics.memoryTotal }}GB</span>
                                </div>
                                <progress class="progress progress-secondary" :value="systemMetrics.memory" max="100"></progress>
                            </div>
                            <div>
                                <div class="flex justify-between mb-1">
                                    <span>磁盘I/O</span>
                                    <span>{{ systemMetrics.diskIO }}MB/s</span>
                                </div>
                                <progress class="progress progress-accent" :value="systemMetrics.diskIOPercent" max="100"></progress>
                            </div>
                            <div>
                                <div class="flex justify-between mb-1">
                                    <span>网络带宽</span>
                                    <span>{{ systemMetrics.networkBandwidth }}%</span>
                                </div>
                                <progress class="progress progress-info" :value="systemMetrics.networkBandwidth" max="100"></progress>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 节点详情模态框 -->
        <div v-if="showNodeModal" class="modal modal-open">
            <div class="modal-box w-11/12 max-w-2xl">
                <h3 class="font-bold text-lg mb-4">
                    <i :class="selectedNode.icon" class="mr-2"></i>
                    {{ selectedNode.name }} 详细信息
                </h3>
                
                <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                    <div class="space-y-4">
                        <div class="bg-base-200 p-4 rounded-lg">
                            <h4 class="font-semibold mb-2">基本信息</h4>
                            <div class="space-y-2 text-sm">
                                <div class="flex justify-between">
                                    <span>服务类型:</span>
                                    <span>{{ selectedNode.type }}</span>
                                </div>
                                <div class="flex justify-between">
                                    <span>IP地址:</span>
                                    <span>{{ selectedNode.ip }}</span>
                                </div>
                                <div class="flex justify-between">
                                    <span>端口:</span>
                                    <span>{{ selectedNode.port }}</span>
                                </div>
                                <div class="flex justify-between">
                                    <span>运行时间:</span>
                                    <span>{{ selectedNode.uptime }}</span>
                                </div>
                            </div>
                        </div>

                        <div class="bg-base-200 p-4 rounded-lg">
                            <h4 class="font-semibold mb-2">性能指标</h4>
                            <div class="space-y-2 text-sm">
                                <div class="flex justify-between">
                                    <span>CPU使用率:</span>
                                    <span>{{ selectedNode.cpu }}%</span>
                                </div>
                                <div class="flex justify-between">
                                    <span>内存使用率:</span>
                                    <span>{{ selectedNode.memory }}%</span>
                                </div>
                                <div class="flex justify-between">
                                    <span>磁盘使用率:</span>
                                    <span>{{ selectedNode.disk }}%</span>
                                </div>
                                <div class="flex justify-between">
                                    <span>网络流量:</span>
                                    <span>{{ selectedNode.network }}MB/s</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="space-y-4">
                        <div class="bg-base-200 p-4 rounded-lg">
                            <h4 class="font-semibold mb-2">健康状态</h4>
                            <div class="space-y-2">
                                <div class="flex items-center space-x-2">
                                    <div class="w-3 h-3 bg-green-500 rounded-full"></div>
                                    <span class="text-sm">服务正常运行</span>
                                </div>
                                <div class="flex items-center space-x-2">
                                    <div class="w-3 h-3 bg-green-500 rounded-full"></div>
                                    <span class="text-sm">网络连接正常</span>
                                </div>
                                <div class="flex items-center space-x-2">
                                    <div class="w-3 h-3 bg-green-500 rounded-full"></div>
                                    <span class="text-sm">资源使用正常</span>
                                </div>
                            </div>
                        </div>

                        <div class="bg-base-200 p-4 rounded-lg">
                            <h4 class="font-semibold mb-2">最近事件</h4>
                            <div class="space-y-2 text-sm">
                                <div class="flex justify-between">
                                    <span>服务重启</span>
                                    <span class="text-base-content/70">2小时前</span>
                                </div>
                                <div class="flex justify-between">
                                    <span>配置更新</span>
                                    <span class="text-base-content/70">1天前</span>
                                </div>
                                <div class="flex justify-between">
                                    <span>版本升级</span>
                                    <span class="text-base-content/70">3天前</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="modal-action">
                    <button class="btn btn-ghost" @click="showNodeModal = false">关闭</button>
                    <button class="btn btn-outline">重启服务</button>
                    <button class="btn btn-primary">查看日志</button>
                </div>
            </div>
        </div>
    </div>

    <script>
        const { createApp } = Vue;

        createApp({
            data() {
                return {
                    unreadAlerts: 3,
                    alertFilter: '',
                    logFilter: '',
                    showNodeModal: false,
                    selectedNode: {},
                    systemMetrics: {
                        cpu: 65,
                        memory: 78,
                        disk: 45,
                        network: 12.5,
                        cpuLoad: '2.1',
                        memoryUsed: 6.2,
                        memoryTotal: 8,
                        diskIO: 45,
                        diskIOPercent: 60,
                        networkBandwidth: 35
                    },
                    appMetrics: {
                        avgResponseTime: 245,
                        qps: 1250,
                        errorRate: 0.12,
                        onlineUsers: 2847
                    },
                    dbMetrics: {
                        connections: 45,
                        queriesPerSecond: 890,
                        slowQueries: 3,
                        cacheHitRate: 94.5
                    },
                    services: [
                        {
                            id: 'web-service',
                            name: 'Web服务',
                            description: 'Node.js应用服务器',
                            status: '正常',
                            responseTime: 245
                        },
                        {
                            id: 'api-service',
                            name: 'API服务',
                            description: 'RESTful API接口',
                            status: '正常',
                            responseTime: 180
                        },
                        {
                            id: 'database',
                            name: '数据库服务',
                            description: 'MySQL主从集群',
                            status: '正常',
                            responseTime: 15
                        },
                        {
                            id: 'cache-service',
                            name: '缓存服务',
                            description: 'Redis缓存集群',
                            status: '警告',
                            responseTime: 5
                        },
                        {
                            id: 'message-queue',
                            name: '消息队列',
                            description: 'RabbitMQ消息服务',
                            status: '正常',
                            responseTime: 25
                        }
                    ],
                    recentAlerts: [
                        {
                            id: 'alert-001',
                            title: 'CPU使用率过高',
                            description: 'Web-01服务器CPU使用率超过80%',
                            level: 'warning',
                            time: '5分钟前',
                            acknowledged: false
                        },
                        {
                            id: 'alert-002',
                            title: '磁盘空间不足',
                            description: '数据库服务器磁盘使用率超过90%',
                            level: 'critical',
                            time: '10分钟前',
                            acknowledged: false
                        },
                        {
                            id: 'alert-003',
                            title: '网络延迟异常',
                            description: '外部API调用响应时间超过5秒',
                            level: 'warning',
                            time: '15分钟前',
                            acknowledged: true
                        },
                        {
                            id: 'alert-004',
                            title: '服务重启',
                            description: 'Redis服务自动重启',
                            level: 'info',
                            time: '30分钟前',
                            acknowledged: true
                        }
                    ],
                    logs: [
                        {
                            id: 'log-001',
                            timestamp: '2024-01-15 14:30:25',
                            level: 'ERROR',
                            service: 'web-service',
                            message: 'Database connection timeout after 30 seconds'
                        },
                        {
                            id: 'log-002',
                            timestamp: '2024-01-15 14:30:20',
                            level: 'WARN',
                            service: 'api-service',
                            message: 'High memory usage detected: 85% of heap space used'
                        },
                        {
                            id: 'log-003',
                            timestamp: '2024-01-15 14:30:15',
                            level: 'INFO',
                            service: 'cache-service',
                            message: 'Cache hit ratio: 94.5% (target: 95%)'
                        },
                        {
                            id: 'log-004',
                            timestamp: '2024-01-15 14:30:10',
                            level: 'DEBUG',
                            service: 'database',
                            message: 'Query execution time: 245ms for SELECT * FROM users'
                        },
                        {
                            id: 'log-005',
                            timestamp: '2024-01-15 14:30:05',
                            level: 'INFO',
                            service: 'web-service',
                            message: 'User authentication successful for user ID: 12345'
                        }
                    ]
                }
            },
            computed: {
                filteredAlerts() {
                    if (!this.alertFilter) return this.recentAlerts;
                    return this.recentAlerts.filter(alert => alert.level === this.alertFilter);
                },
                filteredLogs() {
                    if (!this.logFilter) return this.logs;
                    return this.logs.filter(log => log.level === this.logFilter);
                }
            },
            mounted() {
                this.initCharts();
                this.startRealTimeUpdates();
            },
            methods: {
                getCpuStatus() {
                    if (this.systemMetrics.cpu < 50) return '正常';
                    if (this.systemMetrics.cpu < 80) return '中等负载';
                    return '高负载';
                },
                getMemoryStatus() {
                    if (this.systemMetrics.memory < 60) return '正常';
                    if (this.systemMetrics.memory < 85) return '中等使用';
                    return '高使用率';
                },
                getDiskStatus() {
                    if (this.systemMetrics.disk < 70) return '充足';
                    if (this.systemMetrics.disk < 90) return '需要清理';
                    return '空间不足';
                },
                getServiceStatusColor(status) {
                    const colors = {
                        '正常': 'bg-green-500',
                        '警告': 'bg-yellow-500',
                        '错误': 'bg-red-500',
                        '离线': 'bg-gray-500'
                    };
                    return colors[status] || 'bg-gray-500';
                },
                getServiceStatusBadge(status) {
                    const badges = {
                        '正常': 'badge-success',
                        '警告': 'badge-warning',
                        '错误': 'badge-error',
                        '离线': 'badge-ghost'
                    };
                    return badges[status] || 'badge-ghost';
                },
                getAlertIcon(level) {
                    const icons = {
                        'critical': 'fas fa-exclamation-circle text-error',
                        'warning': 'fas fa-exclamation-triangle text-warning',
                        'info': 'fas fa-info-circle text-info'
                    };
                    return icons[level] || 'fas fa-bell';
                },
                getAlertClass(level) {
                    const classes = {
                        'critical': 'border-error bg-error/10 alert-critical',
                        'warning': 'border-warning bg-warning/10',
                        'info': 'border-info bg-info/10'
                    };
                    return classes[level] || 'border-base-300';
                },
                getLogClass(level) {
                    const classes = {
                        'ERROR': 'log-error',
                        'WARN': 'log-warning',
                        'INFO': 'log-info',
                        'DEBUG': 'log-debug'
                    };
                    return classes[level] || '';
                },
                getLogLevelColor(level) {
                    const colors = {
                        'ERROR': 'text-red-400',
                        'WARN': 'text-yellow-400',
                        'INFO': 'text-blue-400',
                        'DEBUG': 'text-gray-400'
                    };
                    return colors[level] || 'text-white';
                },
                showNodeDetails(nodeId) {
                    const nodeData = {
                        'loadbalancer': {
                            name: '负载均衡器',
                            type: 'Nginx',
                            icon: 'fas fa-balance-scale text-blue-500',
                            ip: '192.168.1.10',
                            port: '80, 443',
                            uptime: '15天 8小时',
                            cpu: 25,
                            memory: 45,
                            disk: 30,
                            network: 8.5
                        },
                        'web1': {
                            name: 'Web服务器-01',
                            type: 'Node.js',
                            icon: 'fas fa-server text-green-500',
                            ip: '192.168.1.20',
                            port: '3000',
                            uptime: '12天 3小时',
                            cpu: 65,
                            memory: 70,
                            disk: 40,
                            network: 12.3
                        },
                        'web2': {
                            name: 'Web服务器-02',
                            type: 'Node.js',
                            icon: 'fas fa-server text-green-500',
                            ip: '192.168.1.21',
                            port: '3000',
                            uptime: '12天 3小时',
                            cpu: 58,
                            memory: 65,
                            disk: 38,
                            network: 10.8
                        },
                        'db-master': {
                            name: '数据库主服务器',
                            type: 'MySQL',
                            icon: 'fas fa-database text-purple-500',
                            ip: '192.168.1.30',
                            port: '3306',
                            uptime: '25天 12小时',
                            cpu: 45,
                            memory: 80,
                            disk: 65,
                            network: 5.2
                        },
                        'db-slave': {
                            name: '数据库从服务器',
                            type: 'MySQL',
                            icon: 'fas fa-database text-purple-400',
                            ip: '192.168.1.31',
                            port: '3306',
                            uptime: '25天 12小时',
                            cpu: 35,
                            memory: 70,
                            disk: 60,
                            network: 3.8
                        },
                        'redis': {
                            name: 'Redis缓存服务器',
                            type: 'Redis',
                            icon: 'fas fa-memory text-red-500',
                            ip: '192.168.1.40',
                            port: '6379',
                            uptime: '18天 6小时',
                            cpu: 30,
                            memory: 55,
                            disk: 25,
                            network: 15.6
                        }
                    };
                    
                    this.selectedNode = nodeData[nodeId] || {};
                    this.showNodeModal = true;
                },
                acknowledgeAlert(alert) {
                    alert.acknowledged = true;
                    this.unreadAlerts = Math.max(0, this.unreadAlerts - 1);
                },
                resolveAlert(alert) {
                    const index = this.recentAlerts.findIndex(a => a.id === alert.id);
                    if (index !== -1) {
                        this.recentAlerts.splice(index, 1);
                        this.unreadAlerts = Math.max(0, this.unreadAlerts - 1);
                    }
                },
                refreshAlerts() {
                    alert('告警列表已刷新！');
                },
                clearLogs() {
                    if (confirm('确定要清空日志吗？')) {
                        this.logs = [];
                    }
                },
                initCharts() {
                    // 实时性能监控图表
                    const realTimeCtx = document.getElementById('realTimeChart').getContext('2d');
                    this.realTimeChart = new Chart(realTimeCtx, {
                        type: 'line',
                        data: {
                            labels: Array.from({length: 20}, (_, i) => `${i}s`),
                            datasets: [
                                {
                                    label: 'CPU使用率',
                                    data: Array.from({length: 20}, () => Math.random() * 100),
                                    borderColor: 'rgb(59, 130, 246)',
                                    backgroundColor: 'rgba(59, 130, 246, 0.1)',
                                    tension: 0.4
                                },
                                {
                                    label: '内存使用率',
                                    data: Array.from({length: 20}, () => Math.random() * 100),
                                    borderColor: 'rgb(34, 197, 94)',
                                    backgroundColor: 'rgba(34, 197, 94, 0.1)',
                                    tension: 0.4
                                }
                            ]
                        },
                        options: {
                            responsive: true,
                            maintainAspectRatio: false,
                            plugins: {
                                legend: {
                                    position: 'top'
                                }
                            },
                            scales: {
                                y: {
                                    beginAtZero: true,
                                    max: 100
                                }
                            }
                        }
                    });

                    // 应用性能图表
                    const appCtx = document.getElementById('appPerformanceChart').getContext('2d');
                    new Chart(appCtx, {
                        type: 'doughnut',
                        data: {
                            labels: ['正常请求', '错误请求'],
                            datasets: [{
                                data: [99.88, 0.12],
                                backgroundColor: [
                                    'rgb(34, 197, 94)',
                                    'rgb(239, 68, 68)'
                                ]
                            }]
                        },
                        options: {
                            responsive: true,
                            maintainAspectRatio: false,
                            plugins: {
                                legend: {
                                    position: 'bottom'
                                }
                            }
                        }
                    });

                    // 数据库性能图表
                    const dbCtx = document.getElementById('dbPerformanceChart').getContext('2d');
                    new Chart(dbCtx, {
                        type: 'bar',
                        data: {
                            labels: ['查询', '插入', '更新', '删除'],
                            datasets: [{
                                label: '操作次数/秒',
                                data: [450, 120, 80, 25],
                                backgroundColor: [
                                    'rgba(59, 130, 246, 0.8)',
                                    'rgba(34, 197, 94, 0.8)',
                                    'rgba(251, 191, 36, 0.8)',
                                    'rgba(239, 68, 68, 0.8)'
                                ]
                            }]
                        },
                        options: {
                            responsive: true,
                            maintainAspectRatio: false,
                            plugins: {
                                legend: {
                                    display: false
                                }
                            },
                            scales: {
                                y: {
                                    beginAtZero: true
                                }
                            }
                        }
                    });
                },
                startRealTimeUpdates() {
                    // 模拟实时数据更新
                    setInterval(() => {
                        // 更新系统指标
                        this.systemMetrics.cpu = Math.max(0, Math.min(100, this.systemMetrics.cpu + (Math.random() - 0.5) * 10));
                        this.systemMetrics.memory = Math.max(0, Math.min(100, this.systemMetrics.memory + (Math.random() - 0.5) * 5));
                        this.systemMetrics.network = Math.max(0, this.systemMetrics.network + (Math.random() - 0.5) * 5);
                        
                        // 更新实时图表
                        if (this.realTimeChart) {
                            this.realTimeChart.data.datasets[0].data.shift();
                            this.realTimeChart.data.datasets[0].data.push(this.systemMetrics.cpu);
                            this.realTimeChart.data.datasets[1].data.shift();
                            this.realTimeChart.data.datasets[1].data.push(this.systemMetrics.memory);
                            this.realTimeChart.update('none');
                        }
                        
                        // 随机添加新日志
                        if (Math.random() < 0.3) {
                            const levels = ['INFO', 'WARN', 'ERROR', 'DEBUG'];
                            const services = ['web-service', 'api-service', 'database', 'cache-service'];
                            const messages = [
                                'Request processed successfully',
                                'Cache miss for key: user_session_12345',
                                'Database query executed in 125ms',
                                'Memory usage threshold exceeded',
                                'User login attempt from IP: 192.168.1.100'
                            ];
                            
                            const newLog = {
                                id: 'log-' + Date.now(),
                                timestamp: new Date().toLocaleString(),
                                level: levels[Math.floor(Math.random() * levels.length)],
                                service: services[Math.floor(Math.random() * services.length)],
                                message: messages[Math.floor(Math.random() * messages.length)]
                            };
                            
                            this.logs.unshift(newLog);
                            if (this.logs.length > 50) {
                                this.logs.pop();
                            }
                        }
                    }, 3000);
                }
            }
        }).mount('#monitoring');
    </script>
</body>
</html>